
<template>
    <el-scrollbar class="cardview">
        <el-row>
            <v-col class="card-content" v-if="data.isShowEntry" cols="6" sm="4" md="3">
                <v-card >
                    <el-row :gutter="20">
                        <el-col title="新建文件" :span="12" @click="isCreateGroupDialogVisible = true" style="width: 120px; ">
                        <el-icon size="large"><Plus /></el-icon>
                        <v-card-subtitle>新建</v-card-subtitle>
                        </el-col>
                        <el-col title="导入文件" :span="12" width="120px" @click="isImportDialogVisible = true" style="width: 120px; ">
                        <el-icon><FolderAdd /></el-icon>
                        <v-card-subtitle>导入</v-card-subtitle>
                        </el-col>
                    </el-row>
                </v-card>
            </v-col>
            <v-col class="card-content" cols="6" sm="4" md="3" v-for="map in maps" :key="map.id">
                <v-card>
                    <div @click="callEdit(map.id)">
                        <v-card-title>{{ map.title }}</v-card-title>
                        <v-card-subtitle v-if="data.isShowProgressLabel" >测试进度: {{ map.progress_t }}</v-card-subtitle>
                        <!-- <el-progress type="circle" :percentage="map.progress_t == null || map.progress_t == '' ? '0' : map.progress_t.match(/\w[0-9]{0,3}/g)[2]" /> -->
                        <ProgressCom v-if="data.isShowProgress" :progress="map.progress_t == null || map.progress_t == '' ? 0 : parseInt(map.progress_t.match(/\w[0-9]{0,3}/g)[2])" />
                        
                        <v-card-subtitle v-if="data.isShowProgress" >更新时间: {{ formatDate(map.update_time) }}</v-card-subtitle>
                        <!-- <v-card-subtitle>更新时间: {{ formatDate(map.update_time) }}</v-card-subtitle> -->
                    </div>
                    
                <div>
                    <v-card-actions v-if="data.isShowBtn">
                        <v-btn color="primary" text @click="callEdit(map.id)">编辑</v-btn>
                        <v-btn color="primary" text @click="exportMap(map.id)">导出</v-btn>
                        <!-- <v-btn color="error" text @click="callDel(map.id)">删除</v-btn> -->
                    </v-card-actions>
                </div>
                </v-card>
            </v-col>
        </el-row>
        <v-dialog class="dialog create-group" v-model="isCreateGroupDialogVisible" >
            <v-card>
                <v-card-title>新建文件</v-card-title>
                <v-card-subtitle>请选择要创建的文件类型</v-card-subtitle>
                <el-button type="primary" @click="callCreate" plain>
                    思维导图
                </el-button>
            </v-card>
        </v-dialog>
            
        <v-dialog class="dialog import" v-model="isImportDialogVisible" >
            <v-card>
                <v-card-title>导入文件</v-card-title>
                <v-card-subtitle>请选择要上传的文件</v-card-subtitle>
                <v-card-text>
                    <v-file-input width="400"
                        v-model="importFile"
                        label="选择xmind文件"
                        accept=".xmind"
                    />
                </v-card-text>
                <v-card-actions>
                    <v-btn color="primary" @click="callImportMind">导入</v-btn>
                    <v-btn text @click="isImportDialogVisible = false">取消</v-btn>

                </v-card-actions>
            </v-card>
        </v-dialog>

    </el-scrollbar>
</template>

<script setup>
import { ref, computed } from 'vue'
import ProgressCom  from '@/components/common/progressCom/index.vue'

let isCreateGroupDialogVisible = ref(false)
let isImportDialogVisible = ref(false)
let importFile = ref(null)
const props = defineProps({
    maps: {
        type: Array,
        default: () => []
    },
    progress: {
        type: String,
        default: "0"
    },
    data: {
        type: Object,
        default: () => {}
    }

})

const emit = defineEmits(['optEdit', 'optDel', 'optCreate', 'importMind'])

function callCreate(){
    emit('optCreate')
}

function callEdit(id) {
    emit('optEdit', id);
}

function callDel(id) {
    emit('optDel', id);
}

function exportMap(id) {
    emit('exportMap', id);
}

function callImportMind() {
    emit("optImport", {file: importFile.value})
}

function formatDate(dateString) {
    return new Date(dateString).toLocaleString()
}


</script>

<style scope>
.cardview {
    float: center;
    top: 90px;
    height: 85vh;
}
.card-content .v-card {
    height: 100%;
    max-width: 400px;
    margin: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    /* border: 0.1px solid #e5e5e5; */
    box-shadow: 0 0.1px 8px rgba(0, 0, 0, 0.3);
    
    background-color: #fcfcfc;
}
.card-content {
    min-height: 200px;
    min-width: 200px;
}

.v-card-title {
    font-size: 18px;
    font-family: "华文宋楷", "微软雅黑", "宋体";
    
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dialog .v-card {
    margin:  auto;
    min-height: 300px;
    width: 800px;
}

</style>